<template>
    <view class="my">
        <view class="t_container">
            <view class="user">
                <u-image
                    width="136rpx"
                    height="136rpx"
                    shape="circle"
                    :src=" userInfo.avatar ? userInfo.avatar : defaultAvatar "
                    :lazy-load=" true "
                    :showMenuByLongpress=" false "
                    @click="navigate('/pagesB/my/avatar/index')"
                ></u-image>
                <view class="info-r">
                    <view class="r-t">
                        <view class="nickname">{{ userInfo.name ? userInfo.name : '由瑞用户' }}</view>
                        <u-image
                            width="40rpx"
                            height="36rpx"
                            :showMenuByLongpress=" false "
                            src="http://oss.antaimedical.com/images/static/2024/08/66b1b867e4b09217821c0fa5Kvjdi6mgjvXJa8e07c1cef3ca735bb8ff07ad9d93a54.png"
                            :lazy-load=" true "
                        ></u-image>
                    </view>
                    <view class="r-b">
                        <text class="data">{{ userInfo.userNumber }}</text>
                        <image
                            src="http://oss.antaimedical.com/images/pro/2024/10/672089a3e4b0d615350f30aagERNGhIq4bb59496cd61f02f49f9d243d05c4b540dcb.png"
                            @click.stop=" copy "
                            class="copy"
                        />
                    </view>
                </view>
            </view>
        </view>
        <view class="container">
            <view class="cell_group">
                <view class="cell_group_box">
                    <u-image
                        width="48rpx"
                        height="48rpx"
                        :showMenuByLongpress=" false "
                        src="http://oss.antaimedical.com/images/pro/2024/10/672086bee4b0d615350f30a9SFBXfHzx1Cmr59d7d1a5a105a21978dc36afc7981708.png"
                        :lazy-load=" true "
                    ></u-image>
                    <view class="cell" @click="navigate('/pagesB/my/userInfo/index')">
                        <text class="option">个人信息</text>
                        <view class="c-r">
                            <u-image
                                v-if="userInfo.updateExhaleFlag == 1"
                                width="36rpx"
                                height="36rpx"
                                :showMenuByLongpress=" false "
                                src="http://oss.antaimedical.com/images/pro/2024/10/672086bee4b0d615350f30a9SFBXfHzx1Cmr59d7d1a5a105a21978dc36afc7981708.png"
                                :lazy-load=" true "
                            ></u-image>
                            <text class="iconfont icon-arrow_rigth" style="padding-left: 10rpx;"></text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="cell_group cell_content" style="margin: 16rpx 0;">
                <view
                    class="cell_group_box"
                    v-for="(item, index) in options"
                    :key=" index "
                    @click="navigate(item.path)"
                >
                    <u-image
                        width="48rpx"
                        height="48rpx"
                        :showMenuByLongpress=" false "
                        :src="item.icon"
                        :lazy-load=" true "
                    ></u-image>
                    <view class="cell" :class="{'none-border' : (index+1) == options.length}">
                        <view
                            class="option"
                        >{{ item.option }} <u-badge v-if="redDot != 0&&item.option=='消息'" :absolute="true" :offset="[-10, -18]" shape="horn"  :value="redDot"></u-badge></view> 
                        <text class="iconfont icon-arrow_rigth"></text>
                    </view>
                </view>
            </view>
            <view class="cell_group" @click="showCode = true">
                <view class="cell_group_box">
                    <u-image
                        width="48rpx"
                        height="48rpx"
                        :showMenuByLongpress=" false "
                        src="http://oss.antaimedical.com/images/pro/2024/10/672086e2e4b0be9d444233b8KhYp6MSdYCu78f56512874f8a37f4914144a39dce8c0.png"
                        :lazy-load=" true "
                    ></u-image>
                    <view class="cell">
                        <text class="option">联系客服</text>
                        <text class="iconfont icon-arrow_rigth"></text>
                    </view>
                </view>
            </view>
        </view>
        <u-overlay :show=" showCode " @click="showCode = false">
            <view class="warp">
                <view class="pop_main">
                    <u-image
                        width="372rpx"
                        height="372rpx"
                        src="http://oss.antaimedical.com/images/static/2024/08/66c85675e4b09217821c0fbaunKhEHRiPADT4703742019f8520d76a5056d89ecee6f.jpg"
                        :lazy-load=" true "
                    ></u-image>
                    <view class="code_tip">扫码获取客服企业微信</view>
                </view>
            </view>
        </u-overlay>
        <tab-bar :current=" 4 "></tab-bar>
    </view>
</template>

<script>
import {
    getDetailsByUser,
    findUserRedDot,
    findMessageRedDot,
} from '@/api/index.js'
import {
    mapState
} from 'vuex'
export default {
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync('userId'),
            defaultAvatar: 'http://oss.antaimedical.com/images/static/2024/06/666a5d1ceb14d0f049f44d0bq2D7khAF169T8422df8d4f59a27d947ae9a760e5895d.png',
            options: [
                //     {
                //     option: '常见问题'
                // },
                {
                    option: '账号与安全',
                    icon: 'http://oss.antaimedical.com/images/pro/2024/10/67208629e4b0d615350f30a7HojY0kkfT46qc17816813574c3f85cf3b59c906f6b09.png',
                    path: '/pagesB/my/safety/index'
                },
                {
                    option: '仪器信息',
                    icon: 'http://oss.antaimedical.com/images/pro/2024/10/6720863ce4b0be9d444233b5mQN7vEp37vP66b035e7321dd090f044cdbac646f6ad5.png',
                    path: '/pagesA/device/index'
                },
                {
                    option: '意见反馈',
                    icon: 'http://oss.antaimedical.com/images/pro/2024/10/6720864ce4b0d615350f30a8icN7lUfMu7wmfb2728c5b266b950fb63c3be962b5a7d.png',
                    path: '/pagesB/my/feedback/index'
                },
                {
                    option: '消息',
                    icon: 'http://oss.antaimedical.com/images/pro/2024/10/6720865ae4b0be9d444233b6ATdvRJRSnO8fb53d9a691640c5b8807f44fcac3a6968.png',
                    path: '/pagesB/my/message/index'
                },
                {
                    option: '绑定手机',
                    icon: 'http://oss.antaimedical.com/images/pro/2024/12/6763c84ae4b0be9d444233faPmGcO5rPZYLY4d174c50cc68a146939025057c85fb29.png',
                    path: '/pagesB/my/bindingPhone'
                },
                {
                    option: '关于',
                    icon: 'http://oss.antaimedical.com/images/pro/2024/10/67208666e4b0be9d444233b7rlhiHRH3y3b881b31e490133ea19363597bc1ee19f9a.png',
                }
            ],
            currentName: '',
            redDot: 0,
            showCode: false // 客服二维码展示
        }
    },
    computed: {
        ...mapState({
            ble: state => state.ble, // 实时蓝牙全局状态
            userInfo: state => state.userInfo
        })
    },
    onLoad () {
    },
    onShow () {
        this.getInfoByUser()
    },
    methods: {
        // 获取用户详情信息
        async getInfoByUser () {
            let params = {
                userId: this.userId,
                urlencoded: true
            }
            try {
                const res = await getDetailsByUser(params)
                if (res.code == 200) {
                    this.$store.commit('setUserInfo', res.data)
                }
            } catch (e) {
                //TODO handle the exception
            }
            let num = 0
            findUserRedDot({ userId: this.userId }).then((res) => {
                num = res.data
                findMessageRedDot({ userId: this.userId }).then((res) => {
                    this.redDot = res.data+num
                })
            })
        },

        // 复制文本至粘贴板
        copy () {
            uni.setClipboardData({
                data: this.userInfo.userNumber
            })
        },
        // 跳转
        navigate (url) {
            if (!url) return
            uni.navigateTo({
                url
            })
        }
    }
}
</script>
<style lang="scss">
page {
    background: #f5f6fa;
    min-height: 100vh;
}
</style>
<style lang="scss" scoped>
.my {
    .t_container {
        width: 100%;
        height: 456rpx;
        background-image: url('http://oss.antaimedical.com/images/pro/2024/10/67207a0ae4b0d615350f30a6mv9iQSit6dLB16c17a4f3390554903507470ec1e6ef3.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 224rpx 48rpx 0;

        .user {
            width: 100%;
            display: flex;
            align-items: center;

            .info-r {
                padding-left: 24rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .r-t {
                    display: flex;
                    align-items: center;
                    padding-bottom: 16rpx;

                    .nickname {
                        padding-right: 8rpx;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #051E56;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-family: PingFangSC-Medium, PingFang SC;
                    }
                }

                .r-b {
                    display: flex;
                    align-items: center;

                    .data {
                        display: flex;
                        align-items: center;
                        padding-right: 16rpx;
                        font-size: 28rpx;
                        color: #051E56;
                    }

                    .copy {
                        width: 28rpx;
                        height: 28rpx;
                    }
                }
            }
        }
    }

    .container {
        border-radius: 48rpx 48rpx 0 0;
        margin-top: -64rpx;
        padding: 48rpx;

        .cell {
            width: 100%;
            height: 112rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 16rpx;

            .option {
                position: relative;
                font-size: 32rpx;
                color: #333333;
            }

            .c-r {
                display: flex;
                align-items: center;
            }
        }
        .cell_content {
            .cell {
                border-bottom: 2rpx solid rgba($color: #000000, $alpha: .1);
            }
            .none-border{
                border: 0;
            }
        }
        .cell_group {
            background-color: #ffffff;
            border-radius: 24rpx;
            overflow: hidden;
            padding: 0 32rpx;

            .cell_group_box {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .cell {
                margin-left: 16rpx;
                border-radius: 0;
            }

            .icon-arrow_rigth {
                color: rgba(#666666, 0.5);
                font-size: 34rpx;
            }
        }
    }

    .pop_main {
        height: 850rpx;
        background-image: url('http://oss.antaimedical.com/images/static/2024/08/66b2dfb8e4b000d2c606b522RXGvW8zGTU2obf9df7c2156d0b89a16df0e7d2dd7f56.png');
        padding: 296rpx 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .code_tip {
            padding-top: 32rpx;
            font-size: 32rpx;
            color: #666666;
        }
    }
}

.red-dot {
    position: relative;
}
.red-dot::after {
    content: '';
    display: inline-block;
    width: 10rpx;
    height: 10rpx;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 5rpx;
}
</style>